﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta><style>/*<![CDATA[*/

table{border: 1px solid gray;}
td{border: 1px dotted gray;}
p{margin: 3px 0 3px 0; padding: 0;}
#ID_Footer{font-size: small; font-style: italic; text-align: right; margin-top: 4em; padding-top: 4px; border-top: 2px solid gray;}

/*]]>*/</style><title>第13章 盒子</title></head><body>
<div><br /></div>
<div style="text-align: center"><span style="font-family: 宋体; font-size: 30pt; padding-left: 77pt; line-height: 280%">第</span><span style="font-family: Calibri; font-size: 30pt; padding-left: 77pt; line-height: 280%">13</span><span style="font-family: 宋体; font-size: 30pt; padding-left: 77pt; line-height: 280%">章 &nbsp; &nbsp; &nbsp; &nbsp;盒子</span></div>
<div><span style="font-family: 微软雅黑; font-size: 16pt; padding-left: 18pt; line-height: 240%">1. &nbsp; &nbsp; &nbsp; &nbsp;概念</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">盒子大小、边框、内</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">/</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">外边距、隐藏</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">/</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">显示盒子</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%"> (p290)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">外边距与内边距</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%"> (p296-297)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">空白区</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%"> (p297)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">边距折叠</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%"> (p303)</span></div>
<div><br /></div>
<div><span style="font-family: 微软雅黑; font-size: 16pt; font-weight: bold; padding-left: 18pt; line-height: 240%">2. &nbsp; &nbsp; &nbsp; &nbsp;属性</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; color: #7030a0; line-height: 240%">width</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">, </span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 240%">height</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">属性，像素、百分数或</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">em</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">值</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%"> (p292)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 240%">min-width</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">, </span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 240%">max-width</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">属性，可缩小和伸展的最大值</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%"> (p293)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 240%">min-height, max-height</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">属性</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%"> (p294)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 240%"> &nbsp; &nbsp; &nbsp; &nbsp;overflow</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">属性，内容溢出后显示方式，值</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">(</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 240%">hidden</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 240%">scroll, visible, auto, inherit</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">) (p295) </span><a href="http://www.w3school.com.cn/cssref/pr_pos_overflow.asp" style="font-family: Times New Roman; font-size: 12pt; text-decoration: underline; color: #0563c1">Ref</a></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;border-width</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">属性，值</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">: </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">thin</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">medium</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">thick</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">; </span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">或像素值。</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">(p298)</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 190%">可对</span><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 21pt; line-height: 190%">border-top-width, border-right-width, border-bottom-width, border-left-width</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 190%"> 4种属性分别进行设置。</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 240%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 240%">也可在同一个border-width属性中分别设定上、右、下、左宽度，空格分隔。</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%">border-style</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">属性，边框的样式，值</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">solid</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">dotted</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">dashed</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">double</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">groove</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">ridge</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">inset</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">outset</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">hidden</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">/</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">none</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">. (p299)</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 240%">可利</span><span style="font-family: 华文楷体; font-size: 11pt; color: #7030a0; padding-left: 21pt; line-height: 240%">用</span><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 21pt; line-height: 240%">border-top-style, border-right-style, border-bottom-style, border-left-style</span><span style="font-family: 华文楷体; font-size: 11pt; color: #002060; padding-left: 21pt; line-height: 240%">分别</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 240%">设定</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%">border-color</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">，可利用</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">rgb</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">值，十六进制或颜色名称设定边框颜色值</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%"> (p300)</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 190%">可对</span><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 21pt; line-height: 190%">border-top-color, border-right- color, border-bottom- color, border-left- color </span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 190%">4种属性分别进行设置。</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 240%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 240%">也可在同一个border</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 240%">-</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 240%"> color属性中按顺时针分别设定上、右、下、左颜色， 空格分隔。</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 240%">border</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">快捷方式，按顺序同时指定宽度、样式、颜色，</span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; color: #ff0000; line-height: 240%">空格</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">分隔。</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">(p301)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%">padding</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">属性，内边距，像素值、</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">em</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">或百分比为单位。若盒子指定了宽度，则内边距在盒子的宽度上增加。</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">(p302)</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 190%">可利用</span><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 21pt; line-height: 190%">padding-top, padding-right, padding-bottom, padding-left</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 190%">分别设定</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 190%">也可指定两个值，上下、左右分别相等。</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 240%">不会被子元素继承</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%">margin</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">属性，外边距，像素值、</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">em</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">或百分比为单位。若盒子指定了宽度，则外边距在盒子的宽度上增加。</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%"> (p303)</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 190%">可利用</span><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 21pt; line-height: 190%">margin-top, margin-right, margin-bottom, margin-left</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 190%">分别设定</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 190%">也可指定两个值，上下、左右分别相等。</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 240%">不会被子元素继承</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; color: #002060; line-height: 190%">盒子居中</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #002060; line-height: 190%"> </span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; color: #002060; line-height: 190%">（</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #002060; line-height: 190%">p304</span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; color: #002060; line-height: 190%">）</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 190%">margin-left, margin-right取值</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 190%">auto</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 240%">或，父元素的text-align 设为center，盒子中的文本也将继承此居中属性</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 240%">display</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">属性，内联</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">/</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">块级元素转换，取值</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 240%">inline</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 240%">block</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 240%">inline-block</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 240%">none</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">（隐藏）</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">(p306)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 240%">visibility</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">属性，隐藏盒子，其位置由空白替换</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">; </span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">取值</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 240%">hidden</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 240%">visible</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%"> (p307)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 240%">border-image</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">属性，值：</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">url</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">，</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">4</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">个切割位置，显示方式</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">(stretch, repeat, round)(p308)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 240%">border-shadow</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">属性，值：水平偏移，垂直偏移，模糊距离，阴影扩展；</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">inset</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">关键字</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">(p309)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%">border-radius</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">属性，圆角，值表示半径，像素单位。</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">(p310)</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 190%">利用</span><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 21pt; line-height: 190%">border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radiu</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 190%">s四个属性来分别设定。</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 190%">分别指定圆角的横向值和纵向值的距离。2个值; 或者8个值，格式：4个横向/4个纵向。</span></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div><script type="text/javascript" language="javascript" src="jquery.js"></script><script type="text/javascript" language="javascript" src="itemlink.js"></script></body></html>